<template>
  <div>
    <h1>商品列表</h1>

    <el-form ref="form" :model="goodsReq" label-width="80px">
      <el-form-item label="活动名称">
        <el-input v-model="goodsReq.goodsName"></el-input>
      </el-form-item>

      <el-form-item label="id">
        <el-input v-model="goodsReq.goodsId"></el-input>
      </el-form-item>

      <el-button type="primary" @click="findGoods">查询</el-button>

    </el-form>

    <el-button type="primary" @click="improtGoods">导出</el-button>


    <el-button type="primary" @click="dialogVisible = true">立即创建</el-button>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
      <span>新增商品</span>

      <el-form :inline="true" :model="goodsReq" class="demo-form-inline">
        <br>
        <el-form-item label="商品id">
          <el-input v-model="goodsReq.goodsId" placeholder="商品id"></el-input>
        </el-form-item>

        <br>
        <el-form-item label="商品名称">
          <el-input v-model="goodsReq.goodsName" placeholder="商品名称"></el-input>
        </el-form-item>
        <br>
        <el-form-item label="商品类型">
          <el-input v-model="goodsReq.goodsType" placeholder="商品类型"></el-input>
        </el-form-item>
        <br>
        <el-form-item label="价格">
          <el-input v-model="goodsReq.goodsPrice" placeholder="价格"></el-input>
        </el-form-item>
        <br>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addGoods">确 定</el-button>
      </el-form>

      <span slot="footer" class="dialog-footer">

  </span>
    </el-dialog>




    <el-table :data="goods" style="width: 100%">
      <el-table-column label="编号" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>


      <el-table-column label="商品id" width="180">

        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.goodsId }}</span>
        </template>
      </el-table-column>

      <el-table-column label="商品名称" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.goodsName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="类型" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.goodsType }}</span>
        </template>
      </el-table-column>

      <el-table-column label="商品价格" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.goodsPrice }}</span>
        </template>
      </el-table-column>

      <el-table-column label="创建人" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.createBy }}</span>
        </template>
      </el-table-column>

      <el-table-column label="创建时间" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>


    </el-table>





  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import {selectGoods, deleteById, savaGoods} from "@/api/system/goods";
// 导出 功能
import { utils, writeFile } from 'xlsx';

export default {
    //import引入的组件需要注入到对象中才能使用"
    components: {},
    props: {},
    data() {
      //这里存放数据"

      return {
        dialogVisible: false,
        goodsReq:{},
        goods:[],

      };
    },
    //计算属性 类似于data概念",
    computed: {},
    //监控data中的数据变化",
    watch: {},
    //方法集合",
    methods: {
      findGoods(){
        this.selectGoodsList();
      },
      // 新增
      addGoods(){
        savaGoods(this.goodsReq).then(response=>{
         this.$message.success(response)
          // 打开对话框
          this.dialogVisible=true
          // 新增完 刷新页面
          this.selectGoodsList();
         // 关闭对话框
         this.dialogVisible=false
        })
      },


      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },

      // 列表
      selectGoodsList(){
        selectGoods(this.goodsReq).then(response=>{
          console.log(response)
          this.goods=response
        })
      },


      // 删除
      handleDelete(id){
        if (confirm("确定删除吗?"+"编号为"+id+"的商品吗?")){
          deleteById(id).then(response=>{
            console.log(response)
            this.$message.success(response)
            this.selectGoodsList();
          })
        }else {
          this.$message.warning("取消删除")
        }
      },
      // 导出 按钮 click点击事件
      improtGoods(){
        // 定义 一个数组
        const array = [
          ['流水号', '商品编号', '商品名称', '商品类型', '商品价格','创建人','创建时间']
        ];
        // 循环
        this.goods.forEach(res=>{
          console.log(res)
          // 添加到array 注意是 ([ ])
          array.push([res.id,res.goodsId,res.goodsName,res.goodsType,res.goodsPrice,res.createBy,res.createTime])
        })
        writeFile(
          {
            SheetNames: ['Sheet1'],
            Sheets: {
              Sheet1: utils.aoa_to_sheet(array)
            }
          },
          '商品信息.xlsx'
        );
      },

    },
    //生命周期 - 创建完成（可以访问当前this实例）",
    created() {
      this.findGoods();
      this.selectGoodsList();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）",
    mounted() {
    },
    beforeCreate() {
    }, //生命周期 - 创建之前",
    beforeMount() {
    }, //生命周期 - 挂载之前",
    beforeUpdate() {
    }, //生命周期 - 更新之前",
    updated() {
    }, //生命周期 - 更新之后",
    beforeDestroy() {
    }, //生命周期 - 销毁之前",
    destroyed() {
    }, //生命周期 - 销毁完成",
    activated() {
    } //如果页面有keep-alive缓存功能，这个函数会触发",
  };
</script>
<style scoped>

</style>
